Background Image

Padre Documentation

Introduction

Thankyou for purchasing Padre HTML Template with Variant Page Builder. This documentation will help to familiarise you with how Padre is structured and how to use the template features. At times, you may need further assistance if something is either not covered, or clear in the documentation. In these instances, you can open a support ticket at our dedicated support forum: Medium Rare - Ticksy

Many thanks,
Medium Rare

Before We Begin
  • I'm getting WordPress install errors!

    Padre is a HTML template, not a WordPress theme. It does not work with WordPress out of the box. If you'd like a refund, you'll need to get in touch with Envato support, as they handle all payments for Themeforest.

  • I've purchased, but Variant still wont let me export!

    Ensure that you are opening Variant from the builder.html file inside the variant folder of your download package. You don't need to use the builder from our demo server.

Structure

Padre is a multipage HTML template. All pages are housed within their own .html file and reside in the root directory of the template. All pages require access to the template's CSS and Javascript files, these files reside within the CSS and JS directories.

Structure FAQ
  • What do I need to upload to my server?

    You'll need to upload all HTML files along with all directories (css,js,mail,video,img) in the structure that they appear in your download package. That is, all HTML files should reside in the root directory, and all other files should reside inside their associated folder.

  • Should I upload the Variant folder?

    No, you don't need to upload the Variant folder - the builder works offline and does not require a server to function.

  • I uploaded the template but the page looks strange and bare!

    This is usually a result of the CSS folder not being uploaded correctly. Ensure the CSS folder is uploaded in the same directory as your HTML files so they have correct access.

  • Where should I make my custom CSS style changes?

    Ensure that you only make style changes inside custom.css. This will make it much easier to update the template later - you'll only need to preserve your custom.css file.

Grid

Padre is based on Bootstrap 3.1 and uses the default Bootstrap 12 column grid system for the underlying structure of each section. Each use of the grid should be wrapped in both a container and row element. Below is a brief example for a section with three equal columns (3 for tablet and up, 6 for smartphones). 

            				
	<div class="container">
		<div class="row">
			<div class="col-md-4 col-sm-6">...</div>
			<div class="col-md-4 col-sm-6">...</div>
			<div class="col-md-4 col-sm-6">...</div>
		</div>
	</div>

For a more detailed explanation of the Bootstrap grid - see the Bootstrap documentation here

Spacing

Padre uses helper classes to space elements out from one another on the page. Helper classes are used to space elements with margin and padding. This makes it easier to create your own elements in HTML without needing extra CSS to arrange them appropriately.

Example: You have a large h1 that you'd like to push 80px away from the subsequent content by adding margin to the bottom. You can use Padre's spacing classes to help: 

            				
	<h1 class="mb80">I'm a large heading</h1>
	<p>
		....
	</p>
	<div>
		...
	</div>

If we wanted to use padding on that element we would have used 'pb' instead of 'mb' where 'pb' refers to 'padding-bottom'.

What about mobile?

Similarly, we can use 'mb-xs-40' if we wanted to halve that margin amount on a mobile device where 80px of margin might be too large. 

            				
	<h1 class="mb80 mb-xs-40">I'm a large heading</h1>
	<p>
		....
	</p>
	<div>
		...
	</div>

Note, we still have mb80 so the heading pushes 80px on desktop / tablet and 40px on mobile. Mobile classes will override when the screen's width is below 767px.

Available classes

Padre's spacing works on multiples of 8. This means you can use classes as such: mb8, mb16, mb24, mb32, mb40, mb48 and so on, but you can't use 'mb61' as it's not a multiple of 8.

  • List Of Classes 
                                           
	.mb0{ margin-bottom: 0 !important; }
	.mb8{ margin-bottom: 8px; }
	.mb16{ margin-bottom: 16px; }
	.mb24{ margin-bottom: 24px; }
	.mb30{ margin-bottom: 30px; }
	.mb32{ margin-bottom: 32px; }
	.mb40{ margin-bottom: 40px; }
	.mb48{ margin-bottom: 48px; }
	.mb56{ margin-bottom: 56px; }
	.mb64{ margin-bottom: 64px; }
	.mb72{ margin-bottom: 72px; }
	.mb80{ margin-bottom: 80px; }
	.mb88{ margin-bottom: 88px; }
	.mb96{ margin-bottom: 96px; }
	.mb104{ margin-bottom: 104px; }
	.mb112{ margin-bottom: 112px; }
	.mb120{ margin-bottom: 120px; }
	.mb160{ margin-bottom: 160px; }

	.mt0{ margin-top: 0 !important; }
	.mt8{ margin-top: 8px; }
	.mt16{ margin-top: 16px; }
	.mt24{ margin-top: 24px; }
	.mt32{ margin-top: 32px; }
	.mt40{ margin-top: 40px; }
	.mt48{ margin-top: 48px; }
	.mt56{ margin-top: 56px; }
	.mt64{ margin-top: 64px; }
	.mt72{ margin-top: 72px; }
	.mt80{ margin-top: 80px; }
	.mt88{ margin-top: 88px; }
	.mt96{ margin-top: 96px; }
	.mt104{ margin-top: 104px; }
	.mt112{ margin-top: 112px; }
	.mt120{ margin-top: 120px; }

	.p32{ padding: 0 32px; }
	.p24{ padding: 24px; }
	.p0{ padding: 0; }
	.pt0{ padding-top: 0; }
	.pt8{ padding-top: 8px; }
	.pt16{ padding-top: 16px; }
	.pt24{ padding-top: 24px; }
	.pt32{ padding-top: 32px; }
	.pt40{ padding-top: 40px; }
	.pt48{ padding-top: 48px; }
	.pt64{ padding-top: 64px; }
	.pt72{ padding-top: 72px; }
	.pt80{ padding-top: 80px; }
	.pt88{ padding-top: 88px; }
	.pt96{ padding-top: 96px; }
	.pt104{ padding-top: 104px; }
	.pt112{ padding-top: 112px; }
	.pt120{ padding-top: 120px; }
	.pt160{ padding-top: 160px; }
	.pt180{ padding-top: 180px; }
	.pt240{ padding-top: 240px; }

	.pb0{ padding-bottom: 0; }
	.pb8{ padding-bottom: 8px; }
	.pb16{ padding-bottom: 16px; }
	.pb24{ padding-bottom: 24px; }
	.pb32{ padding-bottom: 32px; }
	.pb40{ padding-bottom: 40px; }
	.pb48{ padding-bottom: 48px; }
	.pb56{ padding-bottom: 56px; }
	.pb64{ padding-bottom: 64px; }
	.pb72{ padding-bottom: 72px; }
	.pb80{ padding-bottom: 80px; }
	.pb88{ padding-bottom: 88px; }
	.pb96{ padding-bottom: 96px; }
	.pb104{ padding-bottom: 104px; }
	.pb112{ padding-bottom: 112px; }
	.pb120{ padding-bottom: 120px; }
	.pb160{ padding-bottom: 160px; }
	.pb180{ padding-bottom: 180px; }
	.pb240{ padding-bottom: 240px; }

Navigation

Padre features a robust navigation bar with support for single and double level dropdown items.

Navigation Structure

The navigation is made up of 'modules' each function inside the nav bar is considered a module (eg: The logo is a module, the menu is a module, and the top bar with the information is a module). 

            				
	<div class="nav-bar">
			<ul class="menu">
				<li>...</li>
				<li>...</li>
			</ul>
	</div>
Navigation FAQ
  • How do I make the logo bigger / smaller?

    You can control the height of the logo using the .logo selector in CSS. By default the logo is set to a max-height of 175px. To adjust this add the following code to your custom.css file: 

                                            
	.logo{ max-height: ##px; }

    Where ## is your desired height in pixels. Naturally, if you wanted a bigger logo, make it greater than 175px and less, for a smaller logo.

  • How do I make the nav bar itself bigger / smaller?

    You can control the height of the nav using the .nav-bar selector in CSS. By default the nav is set to a max-height of 55px. To adjust this add the following code to your custom.css file: 

                                            
	.nav-bar{ height: ##px; max-height: ##px; line-height: (##-3)px; }

    Where ## is your desired height. Ensure the height and max-height are the same and the line-height is 3 pixels less than the height and max-height, this will ensure the logo and menu remain vertically centered inside the nav bar.

Colour Schemes

Padre has a number of included colour schemes that you can switch to at any time. Each colour scheme has its own CSS file (eg: theme-red.css). To switch colour schemes, simply replace the theme.css reference in the head of your document with the appropriate colour scheme css file.

Colour Helper Classes

When creating your own elements you may wish to use the template's colours in order to keep things visually consistent. You can do this with the predefined colour classes. Add these classes to any HTML element to modify their colour properties:

  • .bg-dark - Will make the background of an element dark and the text light.
  • .bg-secondary - Will make background of an element an off-white, light grey color. This is useful when you want to breakup a mostly white page.
  • .bg-primary - Will make the background of an element the primary theme color (in this case green) and the text, white.

Sliders

Padre uses the Flexslider jQuery plugin to handle all slider behaviour including image sliders and text sliders. The appearance of the slider will depend on which class you use to initialize it. Slider elements are always structured as so: 

            				
	<div>
		<ul class="slides">
			<li>...</li>
			<li>...</li>
		</ul>
	</div>
Initialisation Classes

Depending on your purpose for the slider, you can choose to include or exclude particular controls. Use these classes on the parent element of your 'slides' ul to initialise.

  • .slider-all-controls - Includes both the arrow controls and the paging controls.
  • .slider-arrow-controls - Includes arrow controls, but not paging controls.
  • .slider-paging-controls - Includes paging controls, but not arrow controls.
  • .slider-thumb-controls - Includes thumbnail paging controls, this is only relevant for image sliders.
Sliders FAQ
  • How do I change the slider timing?

    You can do this by opening scripts.js and around line 259, locate your slider type (all-controls, arrow-controls etc). Inside the curly brackets {} add the option: slideshowSpeed followed by a number in milliseconds like so: 

    	$('.slider-arrow-controls').flexslider({ controlNav: false, slideshowSpeed: 9000 });

    The above options would change the timing to 9 seconds per slide.

  • How do I adjust the slide height?

    The easiest way to adjust the slide height is to give your slider a custom class eg: 'my-slider', then inside your custom.css, make a rule for this class to define the height of the slides: 

    	.my-slider .slides li{ height: ##px; }

    Where '##' is your desired height in pixels.

Icons

Padre makes use of the Themify icon set. Using these icons requires you to follow simple syntax using the Themify predefined icon codes. For a list of all available icon codes, look Here.

Syntax for icons is as follows: 

            				
	<i class="icon ti-twitter"></i>

This would result in:

Size Classes

By default, the icon will appear at size 64px. You can adjust this by using some size classes:

  • .icon-lg - Will make the icon 80px.
  • .icon-sm - Will make the icon 32px;

Instagram Feeds

Some elements in Padre offer the ability to embed an Instagram image feed. These elements use a data attribute 'data-user-name' in conjunction with the Spectragram jQuery plugin to fetch the latest images from the specified Instragram account.

Setting up an Instagram element is as simple as placing your username inside the data attribute like so: 

            				
	<div class="instafeed" data-user-name="my-account-name">
		<ul></ul>
	</div>
Instagram FAQ
  • My feed isn't showing correctly!

    By default, the Spectragram plugin is setup using our own Client ID and Access Token - if you have any issue using this feature, you should create your own Client ID and Access Token and place theme inside scripts.js (~line 262)

    To gain access to your Client ID and Access Token, use this tutorial: here

Using Google Maps

Padre offers the use of two different Google map implementations. The map you see in the demo is an ifrae embedded map but you can also use the google maps javascript API, which requires an API key but allows colour styling of the map, removal of obtrusive UI elements and specifying your own map marker, placed in multiple locations on the map.

iframe embedded map vs javascript API map

javascript API - Pros:

  • Looks better - is already styled to suit the template
  • Does not contain overlaid interface elements in each corner of map
  • Uses your real street address to center the map precisely
  • Easy to use your own map marker/pin image
  • Can show multiple markers set by multiple street addresses

javascript API - Cons:

iframe embedded map - Pros:

  • Does not require a Google Maps API key

iframe embedded map - Cons:

  • Has the default Google Maps colour and interface, no theme customisation
  • No easy way to use your own map marker/pin image
  • Has overlay boxes and Google Maps controls in each corner of your map

We strongly encourage using the javascript API map, not the iframe embed type because the long-term visual appeal vastly outweighs the slight inconvenience of obtaining a Google Maps API key. A Google Maps API key is a seemingly random string of characters which identifies your website to Google when loading the map for your users. The next section explains how to get an API key for your site.

Obtaining a Google Maps API key - current at July 2015

Follow Google's instructions here on how to obtain an API key. When you have your key, proceed to the next section to learn how to set up your pages with the API key and the map.

Inserting your Google Maps API key into your page to load a map

In Variant, you need to click the key icon on the section with your map. When prompted, paste your API key into the box provided and click Save. This only applies to sections with a Google Maps javascript API enabled map - and the key icon will not appear on a section that uses an iframe map, as it is not necessary for an iframe embedded map.

If you are editing HTML outside of Variant, you need to add a data-maps-api-key attribute to the map container like so: 


    data-maps-api-key="AIzaSJiT6D4E0PlvR45biSx0DoWRswL1kfdO9ZU"

The above key is a sample only and will not work for your site.

So, your map code would look something like: 


    <div class="map-canvas" data-maps-api-key="AIzaSJiT6D4E0PlvR45biSx0DoWRswL1kfdO9ZU" data-address="1095 High Street, Armadale, Victoria"></div>

Setting the Address to centre your javascript API enabled map (this does not apply to iframe embedded maps)

In Variant, you need to click the pin icon on the section with your map. When prompted, type your address into the box provided and click Save. Be as specific as you can with the address, and even provide your state and country to give Google as much information as possible to provide you with an accurate point on the map. If an abiguous address is given, and no certain location can be matched, no marker will be shown. This only applies to sections with a Google Maps javascript API enabled map - setting the address for an iframe embedded map is a different process explained below.

If you are editing HTML outside of Variant, you need to add a data-address attribute to the map container like so: 


    data-address="1095 High Street, Armadale, Victoria, Australia"

So, your map code would look something like: 


    <div class="map-canvas" data-address="1095 High Street, Armadale, Victoria" data-maps-api-key="AIzaSJiT6D4E0PlvR45biSx0DoWRswL1kfdO9ZU" ></div>

You may also provide precise latitude and longitude points separated by a comma if you know them: 


    <div class="map-canvas" data-latlong="-37.858192,145.023019" data-maps-api-key="AIzaSJiT6D4E0PlvR45biSx0DoWRswL1kfdO9ZU" ></div>

The data-latlong attribute is optional, and will only be used if no data-address attribute is provided. You can set the data-latlong attribute in Variant by clicking the target icon on the section containing your Google javascript API enabled map.

Styling Your Map (Google Maps API only)

Google Maps API enabled maps can be styled to show and hide map details, and recolour any element. The template will use a default colourless style which you can override with your own style using some JSON style code.

You may choose a predefined map style from the hundreds available ar Snazzy Maps, then simply copy the JSON stye code into Variant.

Alternatively, make your own from scratch with this Style Generator, then simply copy the JSON stye code into Variant.

In Variant, click the paintbrush icon on the section containing your map and paste the full JSON style code from Snazzy Maps or the Style Generator into the box provided. Click Save and the map will update with the new style.

If you are editing HTML outside of Variant, add a data-map-style attribute to the ma-canvas element. The JSON code used will need to be edited to make it compatible since the quote character used in the JSON code will break the HTML. Before pasting your JSON into your HTML page, copy the text into a blank text document and replace all instances of the " (quote) character with the string &quot; to make the JSON embeddable inside HTML markup.


[
  {
    "featureType": "landscape.natural.landcover",
    "stylers": [
      { "visibility": "on" },
      { "weight": 0.7 },
      { "hue": "#00c3ff" }
    ]
  }
]

If editing HTML manually, The code above needs to be altered to look like the below:


[
  {
    &quot;featureType&quot;: &quot;landscape.natural.landcover&quot;,
    &quot;stylers&quot;: [
      { &quot;visibility&quot;: &quot;on&quot; },
      { &quot;weight&quot;: 0.7 },
      { &quot;hue&quot;: &quot;#00c3ff&quot; }
    ]
  }
]

This only applies to sections with a Google Maps javascript API enabled map - styling an iframe embedded map is not possible.

Map markers

See above on how to edit the address value for your map.

You can provide multiple addresses for your map by separating them with a semicolon.

A marker is added for each address supplied.

The map is always centered around the first address supplied. This can be a country name if you want.

If you want to show two markers (eg. one at each end of the continent) on your map but centre the map around another point, add [nomarker] at the end of the first address.

[nomarker] can be added to any address without interfering with the address geocoding, however the map always centres around the first address supplied.

Change the map marker or 'pin' image by replacing mapmarker.png in the template's img folder.

Your mapmarker.png image should be 300 x 300 pixels (which is scaled down to 50 x 50 pixels on the map to account for high-res displays. Just make sure the point of the pin in your image is in the centre at the bottom of the image. See the supplied mapmarker.png as an example.

EXAMPLE 1: Perhaps you have a number of offices across a country - to add a country with multiple markers, add a country name as the first "address" to centre the map there, and add [nomarker]. Then add some other addresses, all separated by semicolons to show map markers at each address. See the example address code for Australia (Zoom level 4 = further away) below and the resulting map: 


    Australia [nomarker]; Perth, Australia; Melbourne, Australia; Sydney, Australia

EXAMPLE 2: Perhaps you have multiple outlets in one city - to add a city with multiple markers, specify the middle of a city as the first "address" to centre the map there, and add [nomarker]. Then add a few other addresses, all separated by semicolons to show map markers at each address. See the example address code for New York (Zoom level 12 = closer) below and the resulting map: 


    Midtown Manhattan, NYC [nomarker]; Downtown NYC; Lower East Side NYC; Upper West Side NYC

This only applies to sections with a Google Maps javascript API enabled map - setting the address for an iframe embedded map is a different process explained below.

LIMITATIONS: Google only allows 10 addresses to be geocoded at one time. If you reach 10 addresses and need more markers on your map, just add any point by using latitude and longitude coordinates in the same address box. These are simply comma separated coordinates ended by a semicolon like the textual addresses. Coordinates can be interspersed with your textual addresses. 


    Melbourne, Victoria, Australia [nomarker]; -37.855151, 145.018092;  RICHMOND, VIC, AU; collingwood, vic, australia;  -37.851623, 144.991615;  williamstown, vic, au; werribee, vic, au; -37.849578, 145.111392; glen waverley, vic,au; manningham, melbourne, au; boronia victoria; ferntreegully, victoria; caroline springs, vic , au;st albans, vic, au; -38.079153, 145.483336

Using more than 10 map markers by interspersing addresses with latitude and longitude coordinates. This only applies to sections with a Google Maps javascript API enabled map - setting the address for an iframe embedded map is a different process explained below.

Map Zoom Level

You must set the zoom level appropriately to show the map of your desired area at the right size. In Variant, click the zoom in icon on the section with your map and provide a number between 1 and 18 where 18 is fully zoomed in and 1 is zoomed out completely. In Variant, the map will reset at the specified zoom level. If you are editing HTML outside of Variant, add a data-map-zoom attribute with a number as the value like so, save, then refresh the page: 


    <div class="map-canvas" data-map-zoom="12" data-maps-api-key="AIzaSJiT6D4E0PlvR45biSx0DoWRswL1kfdO9ZU" ></div>

This only applies to sections with a Google Maps javascript API enabled map - setting the zoom level for an iframe embedded map is a different process explained below.

iframe embedded Google map

To embed a simple map without requiring the use of a Google Maps API key, simply visit Google Maps and search for an address. When you have cetered your map to your desired location and set the appropriate zoom level using the map controls, get the iframe embed code. At the bottom right-hand corner of the map, click the gear/cog symbol and choose Share or Embed Map. A new modal window appears - choose the tab at the top that says Embed Map and select the whole code in the given text box starting with <iframe ... and ending with </iframe>. Copy that to your to your clipboard with Ctrl+C (Windows) or Command+C (Mac) or right-click -> Copy on your mouse.

In Variant, click the pin icon at the top-right corner of the section containing the map and paste the code from Google Maps into the provided "Edit map Embed" box uaing Ctrl+V (Windows) or Command+V (Mac) or Right-click -> Paste on your mouse.

If editing HTML outside of Variant, simply replace the contents of the iframe src=" ... " attribute in the map section of your HTML markup with the contents of the src=" ... " attribute of the iframe you copied on Google Maps.

Capturing referrer via URL ref parameter

When creating a landing page, you may wish to track traffic from a particular source. Padre allows you to capture the referrer on your email forms, and have it sent through as part of the enquiry email when a user submits an email form to make an enquiry.

For instance, you may like to see which visitors made an enquiry after arriving at your site from your Facebook ad link, or perhaps you have Google Ads that you'd like to track also. Whichever it is, just add the parameter ref into your links from each source and Padre will add that referrer info into your email. Here is an example link: 

http://your-website.com/leadpage.html?ref=facebook
http://your-website.com/leadpage.html?ref=fb
http://your-website.com/leadpage.html?ref=googleads

How it works

When the page loads, Padre will detect if there is a ref parameter and add a hidden field to each email form with the referrer value automatically set. When the form is sent, the value is picked up on the server side in mail.php and is included as part of the email text.

If there is no referrer parameter set in the URL, nothing happens and nothing is sent through. You do not have to use it, but the option is there for those who do.

Linking the mail form via SMTP server

Your mail form will not work unless you have your files running on a hosting server with PHP 5. When you have your files ready on your hosting server, you need to edit the settings in /mail/mail.php to make the email function work.

Please note that you should first get your SMTP mail settings from your hosting provider before proceeding. It is also a good idea to set up your sending email address in cPanel before proceeding. Contact your hosting provider for support in this area, as we don't have access to your system to sort out these details.

Open /mail/mail.php and make the following changes:

  • Line 13: Change to your own SMTP mail server address, either a hostname or ip address. Usually mail.yourdomain.com if you want to use your cPanel hosting server's email system. Otherwise you can use your ISP mail server but beware you'll need to provide account login details either way.
  • Line 14: Change the port number to the port for your outgoing server supplied by your hosting provider.
  • Line 15: Change the security layer used by your outgoing/SMTP server. This can either be 'ssl', 'ssl3', 'tls' or null if you want to use no security layer. Note that when using null, there are no quote marks around the word, just the word null.
  • NOTE FOR GMAIL USERS: Gmail requires that you use port 587 with TLS security so your lines 13, 14 and 15 would look like this: 
    
    $outgoingServerAddress      = 'smtp.gmail.com';     // Consult your hosting provider.
    $outgoingServerPort         = '587';                // Options: '587' , '25' - Consult your hosting provider.
    $outgoingServerSecurity     = 'tls';                // Options: 'ssl' , 'tls' , null - Consult your hosting provider.
  • Line 19: Change to your sending email account username, usually the entire email address at your domain eg: test@mediumra.re . You might need to create an email account in your cPanel for this if you don't already have one set up. Otherwise you can use the SMTP mail account info from your ISP.
  • Line 20: Change to the password for your sending email account at your domain. You might need to create an email account in your cPanel for this if you don't already have one set up.
  • Line 23: Change to the email address of the person who will be receiving and handling all the emails from the users who enquire through the website.
  • Line 24: Change to the name of the recipient who will handle all emails that come from the website.
  • Line 27: Change this to what you want the subject of the email to be in the recipient's email.
  • Line 28: Here is where you name your website, for instance "Yum Yum Restaurant Website" - this name will be used when the user does not supply a name, or when there is no email input on the form. Eg. when the form has only name and phone fileds, the email will appear to come from "Yum Yum Restaurant Website".

You will receive feedback from the Swift Mailer system on your page. You will be given an error until you get the sending settings just right. When the settings are correct, you'll receive a green box with a success message. Swift Mailer is used because it is reliable in sending, and gives feedback when message has been sent.

For a full range of documentation on configuring and using the Swift Mailer Library see here: http://swiftmailer.org/docs/sending.html

If you encounter a "Connection refused" problem with the contact form you may need to contact your server or email host to determine the correct SMTP settings, or fall back to using the standard mail function (see next section). When you see a timeout message, it could be that the supplied port number or security setting is wrong for your particular SMTP server.

Of course we are always here to help too! Please open a support ticket at our forum on Ticksy

Linking the mail form using native PHP mail()

The Mail Transport sends messages by delegating to PHP's internal mail() function.

In our experience, the mail() function is not particularly reliable. We only recommend using this if you can't get a satisfactory result using the above mentioned SMTP method.

The problem with mail() is that it "tries" to simplify things to the point that it actually makes things more complex due to poor interface design. The developers of Swift Mailer have gone to a lot of effort to make the Mail Transport work with a reasonable degree of consistency.

Serious drawbacks when using this Transport are:

  • Unpredictable message headers
  • Lack of feedback regarding delivery failures
  • Lack of support for several plugins that require real-time delivery feedback

It's a last resort, so use SMTP instead where possible.

Using the mail transport

Open mail/mail.php and make the following changes:

  • Line 9: Make sure line 9 has $emailMethod set to phpmail. That is, "phpmail" within the quotation marks on the right-hand-side of the equals sign like this: 

    $emailMethod                = 'phpmail'; // REQUIRED value. Options: 'smtp' , 'phpmail'

For a full range of documentation on configuring and using the Swift Mailer Library see here: http://swiftmailer.org/docs/sending.html

Of course we are always here to help too! Please open a support ticket at our forum on Ticksy

Redirecting to a confirmation page

Padre can redirect your users to a confirmation page after successful submission of email forms or newsletter signup (Mail Chimp / Campaign Monitor) forms.

Default behaviour is to send the form then display a success message in a green box. Setting the success-redirect parameter on any form will override the default behaviour and send the user to your specified page instead of showing the green box. A form with a success redirect parameter would look like this: 


    <form class="form-email" success-redirect="http://mediumra.re/thanks.html" data-success="Thanks for your submission, we will be in touch shortly." data-error="Please fill all fields correctly.">
        <input type="text" class="validate-required" name="name" placeholder="Your Name">
        <input type="text" class="validate-required validate-email" name="email" placeholder="Email Address">
        <textarea class="validate-required" name="message" rows="4" placeholder="Message"></textarea>
        <input type="submit" value="Send Message">
    </form>

The address given in the success-redirect attribute should be a fully formed URL including http:// to ensure maximum compatibility.

If the attribute success-redirect is left blank, or not included in the form tag, the default behaviour will occur (green box success message appears).